<template>
  <van-cell center title="最佳推荐模式" id="match">
    <template #right-icon>
      <van-switch v-model="isMatchMode" />
    </template>
  </van-cell>
  <van-highlight :keywords="keywords" :source-string="text"
                 v-if="!isMatchMode"
                 id="keywordsMatchModeFontSize"/>
  <user-card-list @popUp="popUp" @pop-user="popUser" :userList="userList" />
  <!-- 底部弹出 -->
  <van-popup
      v-model:show="showPopUpIndex"
      @open="listUserTeam(showUser.id)"
      position="bottom"
      closeable
      close-icon="clear"
      @close="activeNamesToNull"
      round
      destroy-on-close="true"
  >
    <van-card
        :tag="showUser.gender === 0 ? '男' : '女'"
        :title="`Ta的昵称: ${showUser.username} `"
        :thumb="showUser.avatarUrl"
        id="userCard"
    >
      <template #tags>
        <van-tag round type="primary" size="medium" v-for="tag in showUser.tags" style="margin-right: 8px; margin-top: 8px">
          {{tag}}
        </van-tag>
      </template>
    </van-card>
    <van-collapse v-model="activeNames" accordion v-if="showPopUpIndex">
      <van-collapse-item name="1">
        <template #title>
          <div><van-icon name="description-o" /> 个性签名：</div>
        </template>
        <van-highlight :keywords="showUser.profile" :source-string="showUser.profile" id="userPopShow"/>
        <van-highlight v-if="!showUser.profile" :keywords="'这个人很懒，还没有介绍自己'" :source-string="'这个人很懒，还没有介绍自己'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="2">
        <template #title>
          <div><van-icon name="phone-o" /> 联系方式：</div>
        </template>
        <van-highlight :keywords="showUser.phone" :source-string="showUser.phone" id="userPopShow"/>
        <van-highlight v-if="!showUser.phone" :keywords="'Ta未提供联系方式'" :source-string="'Ta未提供联系方式'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="3">
        <template #title>
          <div><van-icon name="envelop-o" /> 邮箱：</div>
        </template>
        <van-highlight :keywords="showUser.email" :source-string="showUser.email" id="userPopShow"/>
        <van-highlight v-if="!showUser.email" :keywords="'Ta未展示自己的邮箱'" :source-string="'Ta未展示自己的邮箱'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="4">
        <template #title>
          <div><van-icon name="contact-o" /> 星球编号：</div>
        </template>
        <van-highlight :keywords="showUser.planetCode" :source-string="showUser.planetCode ?? 'Ta还没有星球编号'" id="userPopShow"/>
        <van-highlight v-if="!showUser.planetCode" :keywords="'Ta还没有星球编号'" :source-string="'Ta还没有星球编号'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="5">
        <template #title>
          <div><van-icon name="flag-o" /> Ta 加入的队伍：</div>
        </template>
        <team-card-fro-view-members-list :team-list="userJoinTeamList" />
        <van-highlight v-if="userJoinTeamList.length < 1" :keywords="'Ta 还没有加入队伍'" :source-string="'Ta 还没有加入队伍'" id="userPopShow" />
      </van-collapse-item>
    </van-collapse>
  </van-popup>
</template>
<script setup lang="ts">

import { ref, watchEffect } from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showSuccessToast, showToast} from "vant";
import {showFailToast} from "vant";
import UserCardList from "../components/UserCardList.vue";
import TeamCardFroViewMembersList from "../components/TeamCardFroViewMembersList.vue";

// 匹配模式变量
const isMatchMode = ref<boolean>(false);

const userList = ref([]);
const keywords = '默认推荐模式';
const text = '默认推荐模式';

// "了解我"按钮-弹窗传值
const showPopUpIndex = ref();
const showUser = ref();
const popUp=(indexDataOne: any)=>{
  showPopUpIndex.value = indexDataOne;
}
const popUser = (indexDataTwo: any) => {
  showUser.value = indexDataTwo;
  if(showUser.value.profile === null) {
    showUser.value.profile = '';
  }
  if(showUser.value.phone === null) {
    showUser.value.phone = '';
  }
  if(showUser.value.email === null) {
    showUser.value.email = '';
  }
}

// 用户加入的队伍列表
const userJoinTeamList = ref();
const activeNames = ref<string>();

/**
 * 加载数据
 */
const loadData = async () => {
  let userListData = null;
  if(isMatchMode.value) {
    /**
     * 匹配推荐伙伴
     */
    showToast('正在匹配最佳伙伴！请稍候...')
    const num = 10;
    userListData = await myAxios.get('/user/match',{
      params: {
        num,
      },
    })
        .then(function (response) {
          console.log('/user/match succeed',response);
          showSuccessToast('匹配成功');
          return response?.data;
        })
        .catch(function (error) {
          console.log('/user/match error',error);
          showFailToast('匹配最佳伙伴失败');
        });
  } else {
    /**
     * 默认推荐
     */
    userListData = await myAxios.get('/user/recommend',{
      params: {
        pageSize: 8,
        pageNum: 1,
      },
    })
        .then(function (response) {
          console.log('/user/recommend succeed',response);
          return response?.data?.records;
        })
        .catch(function (error) {
          console.log('/user/recommend error',error);
          showFailToast('匹配伙伴失败');
        });
  }
  if (userListData){
    userListData.forEach(user => {
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
}

// 监听isMatchMode变化 => 调整匹配模式
watchEffect(() => {
  loadData();
})

/**
 * 搜索用户加入的队伍
 * @returns {Promise<void>}
 */
const listUserTeam = async (userId: number) => {
  const res = await myAxios.get('/team/list/user/join', {
    params: {
      userId: userId,
      pageNum: 1,
    },
  });
  // @ts-ignore
  if (res?.code === 0 && res.data){
    userJoinTeamList.value = res.data;
  } else {
    showFailToast('我加入的队伍展示失败，请刷新重试');
  }
};

// const mockUser = [
//   {
//   id: 10,
//   username: '陈凡',
//   userAccount: 'Hang Yunjie',
//   avatarUrl: 'src/assets/vue.svg',
//   gender: '男',
//   profile: '一名原神玩家，喜欢Java开发和玩绝区零！谢谢大家，可以与我合作！',
//   phone: '13265457908',
//   email: '1256661151@qq.com',
//   userRole: 0,
//   planetCode: '2',
//   tags: ['java', 'emo中', '打工人', '原神', '绝区零', '王者荣耀'],
//   createTime: new Date(),
//   },
//   {
//     id: 1,
//     username: '树脂鼠鼠果酱',
//     userAccount: 'Guo Jianghui',
//     avatarUrl: 'src/assets/cuteXiaBa.jpg',
//     gender: '男',
//     profile: '喜欢Java开发、王者荣耀！谢谢大家！',
//     phone: '15083857269',
//     email: '1258981151@qq.com',
//     userRole: 0,
//     planetCode: '1',
//     tags: ['java', 'emo中', '打工人', '王者荣耀'],
//     createTime: new Date(),
//   },
// ]
const activeNamesToNull = () => {
  activeNames.value = '';
}
</script>
<style scoped>
#empty {
  --van-empty-description-font-size: 21px;
  --van-empty-description-padding: 10px;
}
#match {
  font-size: 15px;
  font-weight: 760;
  opacity: 94%;
}
#keywordsMatchModeFontSize {
  font-size: 17px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}
#userPopShow {
  font-size: 15px;
  --van-highlight-tag-color: #1a1a1a;
}
</style>